11月
22

打不过就加入，挑战不写一行代码，用AI研发辅助工具 ，手撸一个App

发表于 • 字数统计 2007 • 阅读次数

引言

数字化时代，拥有一款属于自己的应用程序无疑是一件令人兴奋的事情。然而，对于大多数没有编程背景的普通人来说，这似乎是一个不切实际的想法。

幸运的是，通义灵码携手科技博主@玺哥超carry，为我们带来了一个革命性的解决方案——一个完全面向普通人的自然语言编程教程，让没有编程经验的小白，也可以通过自然语言编程，快速、轻松地打造一个完整的应用程序。

教程概览

这个教程共分为五部分，涵盖了从前端代码生成到后端代码生成，再到测试发布上线的全过程：前端代码生成、搭建本机服务，后端代码生成（上），后端代码生成（下）、测试发布上线。
。

它不仅完全免费，还为前100位完成教程的粉丝准备了100个降噪蓝牙耳机作为奖励。这不仅是一个学习的机会，更是一个获得实用奖品的好机会。

教程体验

准备工作

按照教程的指导，下载并安装了VS CODE，并在插件市场中找到了“TONGYI Lingma”插件。安装并登录后，创建了一个新的项目文件夹，并将其拖拽到VS CODE中。

前端代码生成

接下来，我打开了课程包中的“01 前端代码生成”部分，复制了“提示词”中的“生成首页”内容，并粘贴发送给了通义灵码。不久，通义灵码根据我的要求生成了代码。我将生成的代码复制并粘贴到了新建的index.html文件中，并保存。

预览与调整

使用VS CODE的预览功能，我发现生成的代码效果与预期有些差异。

但教程中提到，AI写代码每次的结果都是不同的，这让我意识到，学习如何精确控制样式将是后续课程的重点。

目前，我只需学会基本操作，而通义灵码已经帮我完成了大部分工作。

内容页与个人主页

按照同样的方法，我继续使用提示词生成了内容页、个人主页和内容发布页。就这样，没有编写一行代码，我已经完成了四个网页的制作。

结语

通过这次体验，我深刻感受到了通义灵码的强大。它不仅降低了编程的门槛，还激发了我对AI编程辅助工具的兴趣。

我期待着后续的课程，学习如何优化前端页面、搭建本机服务、生成后端代码，并最终将我的APP测试发布上线。

参与活动

为了分享我的学习成果，我已经录制了完成的代码效果，并发布到了我的B站主页。并 @了玺哥超Carry 和 @通义灵码，希望能够成为前100位幸运儿之一，获得降噪蓝牙耳机。如果你也对这个教程感兴趣，不妨加入我们，一起在通义灵码的帮助下，共同打造属于自己的APP。

生成App的完整 prompt 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

## 使用bootstrap框架制作一个页面： 
- 整体适用于移动设备，自适应设备分辨率
- 激活状态为红色，默认状态为灰色
 
- 顶部导航固定在页面顶部，必须使用navbar-expand;
* 左对齐图片logo(路径：https://placehold.co/40x40，css处理成圆形)
* 居中显示：推荐(激活)、发现、关注
* 右对齐是一个搜索图标，不要折叠菜单
 
- 页面主体是左右两列布局的瀑布流，使用 `https://placehold.co/$widthx$height` 的格式填充所有需要使用图片的路径
* 瀑布流默认加载10个元素，左右两列布局
* 瀑布流滚动到底部的时候自动加载新的10个元素，每个元素是上下结构的缩略图和文字标题
* 瀑布流需要一个loading状态
* 任何分辨率下都要保持左右两列的布局结构
 
- 底部导航固定在页面底部，菜单元素由图标在上文字在下的结构组成，分别是：首页(激活)、视频、发布、消息、我的
 
- 使用Bootstrap Icons作为图标库
 
## 给我完整的页面代码，不要拆分显示，不要省略




## 使用bootstrap框架制作内容详情展示页： 
- 整体适用于移动设备，自适应设备分辨率
 
- 顶部导航固定在页面顶部
* 左对齐返回图标，接着是一个用户头像(路径：https://placehold.co/40x40，css处理成圆形)
* 右对齐是一个关注按钮
 
- 页面主体：
* 可以左右滑动的图集，使用 `https://placehold.co/$widthx$height` 的格式填充所有需要使用图片的路径
* 文字段落内容（虚构生成200字中文内容）
* 接下来是一个留言行：左侧是用户头像，右侧是一个文字输入框
* 接下来是留言互动部分（虚构生成5条留言内容）
 
- 底部导航固定在页面底部
* 文字输入框(60%的宽度) + 图标加数量的：点赞，收藏，留言
 
- 使用Bootstrap Icons作为图标库
 
## 给我完整的页面代码，不要拆分显示，不要省略



## 使用bootstrap框架制作一个用户个人主页： 
- 整体适用于移动设备，自适应设备分辨率
- 激活状态为红色，默认状态为灰色
 
 
- 导航栏是左侧是更多图标，右侧是一个分享图标，不要折叠
 
- 用户资料展示范围，展示范围内使用(images/bg.png)作为背景，用css设置了70%的透明度
* 用户头像(路径：images/avatar.png，css处理成圆形)+用户昵称
* 用户简介
* 关注、粉丝数、获赞数
 
- 居中显示的tab：笔记、收藏、赞过
 
- 页面主体是左右两列布局的瀑布流，使用 `https://placehold.co/$widthx$height` 的格式填充所有需要使用图片的路径
* 瀑布流默认加载10个元素，左右两列布局
* 瀑布流滚动到底部的时候自动加载新的10个元素，每个元素是上下结构的缩略图和文字标题
* 瀑布流需要一个loading状态
* 任何分辨率下都要保持左右两列的布局结构
 
- 底部导航固定在页面底部，菜单元素由图标在上文字在下的结构组成，分别是：首页、视频、发布、消息、我的(激活)
 
- 使用Bootstrap Icons作为图标库
 
## 给我完整的页面代码，不要拆分显示，不要省略




## 使用bootstrap框架制作一个内容发布页面： 
- 整体适用于移动设备，自适应设备分辨率
- 主题色是红色
 
- 顶部导航固定在页面顶部，必须使用navbar-expand
* 左对齐返回图标
* 不要折叠菜单
 
- 页面主体：
* 多图片上传，支持预览
* 预览图片尺寸：100px x 100px
* 图片排列：网格布局
* 支持预览图片删除
* 美化默认上传组件样式
* 文本编辑区
  - 使用textarea
  - 最小高度：350px
  - 占位文本："请输入内容..."
-100%宽度的发布按钮
 
## 给我完整的页面代码，不要拆分显示，不要省略
分享到：

评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理